<template>
  <div class="login-container">
    <!-- 大背景 -->
    <div class="background-overlay"></div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 左侧图片区域 -->
      <div class="left-section">
        <div class="image-container">
          <div class="logo-section">
            <i class="el-icon-reading"></i>
<!--            <h2>刷题App</h2>-->
            <p>智能后台管理系统</p>
          </div>
          <div class="illustration">
            <!-- 可以在这里添加插图或图标 -->
            <div class="feature-list">
              <div class="feature-item">
                <i class="el-icon-check"></i>
                <span>海量题库</span>
              </div>
              <div class="feature-item">
                <i class="el-icon-check"></i>
                <span>智能组卷</span>
              </div>
              <div class="feature-item">
                <i class="el-icon-check"></i>
                <span>数据分析</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间分隔区域 -->
      <div class="center-section">
        <div class="welcome-text">
          <h1>欢迎登录</h1>
          <div class="subtitle">Welcome Back</div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="right-section">
        <div class="form-container">
          <div class="form-header">
            <h3>登录</h3>
            <p>请输入您的登录信息</p>
          </div>

          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            @keyup.enter.native="handleLogin"
          >
            <el-form-item prop="username">
              <div class="input-wrapper">
                <el-input
                  ref="username"
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  name="username"
                  type="text"
                  tabindex="1"
                  prefix-icon="el-icon-user"
                  size="large"
                />
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="input-wrapper">
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model="loginForm.password"
                  :type="passwordType"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  prefix-icon="el-icon-lock"
                  size="large"
                  @keyup.enter.native="handleLogin"
                >
                  <template slot="suffix">
                    <i
                      :class="passwordType === 'password' ? 'el-icon-view' : 'el-icon-hide'"
                      @click="showPwd"
                      class="password-toggle"
                    ></i>
                  </template>
                </el-input>
              </div>
            </el-form-item>

            <div class="form-options">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <a href="#" class="forgot-password">忘记密码?</a>
            </div>

            <el-button
              :loading="loading"
              type="primary"
              size="large"
              class="login-button"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>

            <div class="register-link">
              <span>还没有账号? </span>
              <router-link to="/register" class="register-btn">立即注册</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 装饰性元素 -->
    <div class="decorative-elements">
      <div class="floating-element element-1"></div>
      <div class="floating-element element-2"></div>
      <div class="floating-element element-3"></div>
    </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('请正确输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error('请输入3个以上字符的密码'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      rememberMe: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  // 添加云朵背景效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 50%),
      radial-gradient(ellipse at 40% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
    animation: cloudMove 20s ease-in-out infinite;
  }
}

@keyframes cloudMove {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(10px); }
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 0 60px;
}

.left-section {
  display: flex;
  align-items: center;
  justify-content: center;

  .image-container {
    text-align: center;
    color: white;

    .logo-section {
      margin-bottom: 40px;

      i {
        font-size: 80px;
        color: #fff;
        margin-bottom: 20px;
        display: block;
        text-shadow: 0 4px 8px rgba(0,0,0,0.3);
      }

      h2 {
        font-size: 36px;
        margin: 0 0 10px 0;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      }

      p {
        font-size: 18px;
        opacity: 0.9;
        margin: 0;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      }
    }

    .illustration {
      .feature-list {
        .feature-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 15px;
          font-size: 16px;

          i {
            color: #4ade80;
            margin-right: 12px;
            font-size: 18px;
          }

          span {
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
          }
        }
      }
    }
  }
}

.center-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;

  .welcome-text {
    text-align: center;
    color: white;

    h1 {
      font-size: 48px;
      margin: 0 0 10px 0;
      font-weight: 700;
      text-shadow: 0 4px 8px rgba(0,0,0,0.3);
      background: linear-gradient(45deg, #fff, #e2e8f0);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .subtitle {
      font-size: 20px;
      opacity: 0.9;
      font-style: italic;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
  }
}

.right-section {
  display: flex;
  align-items: center;
  justify-content: center;

  .form-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    width: 400px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow:
        0 35px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .form-header {
      text-align: center;
      margin-bottom: 40px;

      h3 {
        font-size: 28px;
        color: #1f2937;
        margin: 0 0 8px 0;
        font-weight: 700;
      }

      p {
        color: #6b7280;
        margin: 0;
        font-size: 14px;
      }
    }
  }
}

.login-form {
  .input-wrapper {
    margin-bottom: 24px;

    :deep(.el-input__inner) {
      height: 50px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 16px;
      transition: all 0.3s ease;
      background: #f9fafb;

      &:focus {
        border-color: #667eea;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
      }
    }

    :deep(.el-input__prefix) {
      color: #9ca3af;
    }
  }

  .password-toggle {
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.3s ease;

    &:hover {
      color: #667eea;
    }
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    :deep(.el-checkbox__label) {
      color: #6b7280;
      font-size: 14px;
    }

    .forgot-password {
      color: #667eea;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s ease;

      &:hover {
        color: #4f46e5;
      }
    }
  }

  .login-button {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .register-link {
    text-align: center;
    margin-top: 30px;
    color: #6b7280;
    font-size: 14px;

    .register-btn {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.3s ease;

      &:hover {
        color: #4f46e5;
      }
    }
  }
}

// 装饰性浮动元素
.decorative-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;

  .floating-element {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;

    &.element-1 {
      width: 100px;
      height: 100px;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    &.element-2 {
      width: 150px;
      height: 150px;
      top: 60%;
      right: 15%;
      animation-delay: -2s;
    }

    &.element-3 {
      width: 80px;
      height: 80px;
      bottom: 20%;
      left: 20%;
      animation-delay: -4s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.3;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .content-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 20px;
    text-align: center;
  }

  .left-section,
  .center-section {
    display: none;
  }

  .right-section {
    .form-container {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
    }
  }
}

@media (max-width: 768px) {
  .right-section {
    .form-container {
      padding: 30px 20px;
      margin: 20px;
    }
  }
}
</style>

<!-- 清除原有的全局样式干扰 -->
<style lang="scss">
.login-container {
  // 重置 Element UI 的输入框样式
  .el-form-item {
    margin-bottom: 0;
    border: none;
    background: none;
    border-radius: 0;
  }

  .el-input {
    width: 100%;
    height: auto;

    .el-input__inner {
      background: #f9fafb !important;
      color: #374151 !important;
      caret-color: #667eea !important;

      &::placeholder {
        color: #9ca3af !important;
      }

      &:-webkit-autofill {
        background-color: #f9fafb !important;
        -webkit-text-fill-color: #374151 !important;
        box-shadow: 0 0 0px 1000px #f9fafb inset !important;
      }
    }
  }

  .el-checkbox {
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #667eea;
      border-color: #667eea;
    }
  }
}
</style>
